<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<base href="<%=basePath%>">
<title>Insert title here</title>
	<script src="echarts/echarts.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap-rs/themes/black/easyui.css">
	<link rel="stylesheet" type="text/css" href="bootstrap-rs/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="bootstrap-rs/demo.css">
	<script type="text/javascript" src="bootstrap-rs/jquery.min.js"></script>
	<script type="text/javascript" src="bootstrap-rs/jquery.easyui.min.js"></script>
	
	<style type="text/css">
		td{
			border:1px black solid;
			padding:5px;
		}
		th{
			border:1px black solid;
			padding:5px;
		}
	</style>
</head>
<body>
	<div style="width:900px;margin:10px auto;text-align:center">
		<h2>网	站	访	问	详	情</h2>
		<label>选择网站:</label>
		<select id='sel' onchange="querydata(this)">
			<c:forEach items="${addrMenu }" var="ad">
				<c:if test="${ad.address ne '\\\N'}">
					<option value="${ad.address }">${ad.address }</option>
				</c:if>
			</c:forEach>
		</select>
	</div>
	<!-- 1.每个网站每天浏览量,独立访客量,ip量 -->
	<div style="width:900px;height:300px;margin:10px auto">
		<table id="dg" class="easyui-datagrid" title="每日访问详情"
				data-options="singleSelect:true,pagination:true,pagePosition:'bottom',rownumbers:true
				,scrollbarSize:0">
		</table>
	</div>
	<div id="moduleOne" style="width: 900px;height:400px;border-color: black;border: 1px;border-style: solid;
			margin:10px auto;background-color:#949494"></div>
			
	<!-- 2.每个网站每小时浏览量,独立访客量,ip量 -->		
	<div style="width:900px;height:300px;margin:10px auto">
		<table id="dghour" class="easyui-datagrid" title="每小时访问详情"
				data-options="singleSelect:true,pagination:true,pagePosition:'bottom',rownumbers:true
				,scrollbarSize:0">
		</table>
	</div>
	<div id="moduleTwo" style="width: 900px;height:400px;border-color: black;border: 1px;border-style: solid;
			margin:10px auto;background-color:#949494"></div>
			
	<!-- 3.网站的总访问量 -->
	<div style="width:900px;height:300px;margin:10px auto">
		<table id="dgTotal" class="easyui-datagrid" title="网站两天总浏览数"
				data-options="singleSelect:true,pagination:true,pagePosition:'bottom',rownumbers:true
				,scrollbarSize:0,url:'crm/bigdata/totalpv?address=',fit:true,fitColumns:true,loadFilter:pageFilter
				,toolbar: '#totalpv_bar'">
				<thead>
					<tr>
						<th data-options="field:'address',width:80">网址</th>
						<th data-options="field:'totalpv',width:100">总浏览数</th>
					</tr>
				</thead>
		</table>
	</div>
	<div id="totalpv_bar" style="paddin:2px 4px">
		<input id="totalsearch" class="easyui-textbox" data-options="prompt:'输入网址查询...',onChange:totalSearch" style="width:200px;height:24px;">
	</div>
	
	<div style="height:10px;margin:10px"></div>
	<hr></hr>
	<div style="height:10px;margin:10px"></div>
	
	<h2 align="center">用	户	访	问	详	情</h2>
	<div style="width:900px;margin:10px auto;text-align:center">	
		<label>选择ip:</label>
		<select id='ipsel' onchange="queryipdata(this)">
			<c:forEach items="${ipMenu }" var="ip">
				<option value="${ip.ip }">${ip.ip }</option>
			</c:forEach>
		</select>
	</div>
	<div style="width: 900px;height:400px;border-color: black;border: 1px;border-style: solid;
				margin:10px auto;background-color:#949494">
			<div id="moduleThree1" style="width: 440px;height:400px;display:inline-block"></div>
			<div id="moduleThree2" style="width: 440px;height:400px;display:inline-block"></div>
	</div>
	
	<div id="moduleFour" style="width: 900px;height:400px;border-color: black;border: 1px;border-style: solid;
			margin:10px auto;background-color:#949494"></div>
	
	<div style="height:10px;margin:10px"></div>
	<hr></hr>
	<div style="height:10px;margin:10px"></div>
	
	<h2 align="center">每	小	时	在	线	人	数</h2>
	<div id="moduleFive" style="width: 900px;height:400px;border-color: black;border: 1px;border-style: solid;
			margin:10px auto;background-color:#949494"></div>
	
    <script type="text/javascript">
       
		function querydata(para){
			$.post('crm/bigdata/query',{'address':para.value},function(data){
				one(data);
				two(data);
			});
        }
        
        function queryipdata(ipsel){
			$.post('crm/bigdata/iponline',{'ip':ipsel.value},function(data){
				three(data);
			});
			$.post('crm/bigdata/ipAddr',{'ip':ipsel.value},function(data){
				four(data);
			});
        }
       
        // 加载每天访问详情
       	function one(data){ 		
       		
       		$('#dg').datagrid({
       			loadFilter:pageFilter,
       			data:data.dayData,
       			columns:[[
				    {field:'address',title:'网址',width:80},
				    {field:'time',title:'日期',width:80,formatter:dayTimeFormatter},
				    {field:'pv',title:'浏览数',width:80},
				    {field:'uv',title:'独立访客',width:80},
				    {field:'ip',title:'访问ip数',width:80}
				]],
				fit:true,
				fitColumns:true
       		});
       		
       		var rows = data.dayData.originalRows;
       		
			var pv = new Array();
			var uv = new Array();
			var ip = new Array();
			
			for(var i = 0;i < rows.length; i++){
				pv[i] = checkXIndex(dayTimeFormatter(rows[i].time),rows[i].pv);
				uv[i] = checkXIndex(dayTimeFormatter(rows[i].time),rows[i].uv);
				ip[i] = checkXIndex(dayTimeFormatter(rows[i].time),rows[i].ip);			
			} 
       		
       		// 基于准备好的dom，初始化echarts实例
	        var chartOne = echarts.init(document.getElementById('moduleOne'));

	        // 指定图表的配置项和数据
	        var optionOne = {
	        	title: {
			        text: '每日访问详情'
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['浏览量','独立访客','访问ip量']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: ['2013/8/18','2013/8/19']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [
			        {
			            name:'浏览量',
			            type:'line',
			            data:pv
			        },
			        {
			            name:'独立访客',
			            type:'line',
			            data:uv
			        },
			        {
			            name:'访问ip量',
			            type:'line',
			            data:ip
			        }
			    ]
			};
	        // 使用刚指定的配置项和数据显示图表。
	        chartOne.setOption(optionOne);
      	}
       
       // 加载每小时访问详情
       function two(data){
       		
       		$('#dghour').datagrid({
       			loadFilter:pageFilter,
       			data:data.hourData,
       			columns:[[
				    {field:'address',title:'网址',width:80},
				    {field:'time',title:'时间',width:80,formatter:hourTimeFormatter},
				    {field:'pv',title:'浏览数',width:80},
				    {field:'uv',title:'独立访客',width:80},
				    {field:'ip',title:'访问ip数',width:80}
				]],
				fit:true,
				fitColumns:true
       		});
       		
       		var rows = data.hourData.originalRows;

			console.log(data)
			var pv = new Array();
			var uv = new Array();
			var ip = new Array();
			
			for(var i = 0;i < rows.length; i++){
				pv[i] = checkXIndex(hourTimeFormatter(rows[i].time),rows[i].pv);
				uv[i] = checkXIndex(hourTimeFormatter(rows[i].time),rows[i].uv);
				ip[i] = checkXIndex(hourTimeFormatter(rows[i].time),rows[i].ip);			
			} 
			
			
			var hourArray = new Array();
        	
        	for(var i = 6,n=0; i < 31; i++,n++){
        		if(i<24){
        			hourArray[n] = '2013/8/18 '+i+':0';
        		}else{
        			hourArray[n] = '2013/8/19 '+(i-24)+':0';
        		}	
        	}
			
       		
       		// 基于准备好的dom，初始化echarts实例
	        var chartTwo = echarts.init(document.getElementById('moduleTwo'));

	        // 指定图表的配置项和数据
	        var optionTwo = {
	        	title: {
			        text: '每小时访问详情'
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['浏览量','独立访客','访问ip量']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: hourArray
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [
			        {
			            name:'浏览量',
			            type:'line',
			            data:pv
			        },
			        {
			            name:'独立访客',
			            type:'line',
			            data:uv
			        },
			        {
			            name:'访问ip量',
			            type:'line',
			            data:ip
			        }
			    ]
			};
	        // 使用刚指定的配置项和数据显示图表。
	        chartTwo.setOption(optionTwo);
      	}
      	
      	
      	 // 3.加载ip上网时间段
       	function three(data){ 		
       		
       		// 基于准备好的dom，初始化echarts实例
	        var chartThree1 = echarts.init(document.getElementById('moduleThree1'));

	        // 指定图表的配置项和数据
	        var optionThree1 = {
			    title : {
			        text: '18日上网段分布',
			        subtext: '纯属虚构',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['凌晨','上午','下午','晚上']
			    },
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:data.eighteen,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
	        // 使用刚指定的配置项和数据显示图表。
	        chartThree1.setOption(optionThree1);
	        
	        
	        // 基于准备好的dom，初始化echarts实例
	        var chartThree2 = echarts.init(document.getElementById('moduleThree2'));

	        // 指定图表的配置项和数据
	        var optionThree2 = {
			    title : {
			        text: '19日上网段分布',
			        subtext: '纯属虚构',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        data: ['凌晨','上午','下午','晚上']
			    },
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            data:data.nineteen,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
	        // 使用刚指定的配置项和数据显示图表。
	        chartThree2.setOption(optionThree2);
      	}
      	
      	
      	function four(data){ 		
       		
       		// 基于准备好的dom，初始化echarts实例
	        var chartFour = echarts.init(document.getElementById('moduleFour'));

	        // 指定图表的配置项和数据
	        var optionFour = {
	        tooltip : {
			   trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			   title: {
			        text: '该用户最常访问网站'
			    },
			    xAxis: {
			        type: 'category',
			        data: data.xAxis
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: data.series,
			        type: 'bar'
			    }]
			};
	        // 使用刚指定的配置项和数据显示图表。
	        chartFour.setOption(optionFour);
      	}
      	
      	// 加载每天访问详情
       	function five(data){ 		
       		
       		var xAxis = data.xAxis;
       		var x = new Array();
       		
       		for(var i = 0; i < xAxis.length; i ++){
       			x[i] = hourTimeFormatter(xAxis[i])
       		}
       	
       		// 基于准备好的dom，初始化echarts实例
	        var chartFive = echarts.init(document.getElementById('moduleFive'));

	        // 指定图表的配置项和数据
	        var optionFive = {
	        	title: {
			        text: '每小时在线人数'
			    },
			    tooltip: {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['在线人数']
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'category',
			        boundaryGap: false,
			        data: x
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [
			        {
			            name:'在线人数',
			            type:'line',
			            data: data.series
			        }
			    ]
			};
	        // 使用刚指定的配置项和数据显示图表。
	        chartFive.setOption(optionFive);
      	}
   
       
       void function(){
			$.post('crm/bigdata/query',{'address':$('#sel').val()},function(data){
				one(data);
				two(data);
			});
			
			$.post('crm/bigdata/iponline',{'ip':$('#ipsel').val()},function(data){
				three(data);
			});
			
			$.post('crm/bigdata/ipAddr',{'ip':$('#ipsel').val()},function(data){
				four(data);
			});
			
			$.post('crm/bigdata/hourOnline',function(data){
				five(data);
			});
			
        }();
       
       function dayTimeFormatter(value) {
       		var date = new Date(value);
       		return date.getFullYear()+'/'+date.getMonth()+'/'+date.getDate();
       }
       
       function hourTimeFormatter(value) {
       		var date = new Date(value);
       		return date.getFullYear()+'/'+date.getMonth()+'/'+date.getDate()+' '+date.getHours()+':'+date.getMinutes();
       }
       
       function pageFilter(data) {
       		var dg = $(this);
	           var opts = dg.datagrid('options');
	           var pager = dg.datagrid('getPager');
	           pager.pagination({
	               onSelectPage:function(pageNum, pageSize){
	                   opts.pageNumber = pageNum;
	                   opts.pageSize = pageSize;
	                   pager.pagination('refresh',{
	                       pageNumber:pageNum,
	                       pageSize:pageSize
	                   });
	                   dg.datagrid('loadData',data);
	               }
	           });
	           if (!data.originalRows){
	               data.originalRows = (data.rows);
	           }
	           var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
	           var end = start + parseInt(opts.pageSize);
	           data.rows = (data.originalRows.slice(start, end));
	           return data;
       }
        
        function totalSearch(){
				$('#dgTotal').datagrid({url:'crm/bigdata/totalpv?address='+$('#totalsearch').textbox('getValue')});
				$('#totalsearch').textbox('textbox').focus(); 
        }
        
        
        function checkXIndex(time,value){
        	var dayArray = new Array('2013/8/18','2013/8/19');
        	var hourArray = new Array();
        	
        	for(var i = 6,n=0; i < 31; i++,n++){
        		if(i<24){
        			hourArray[n] = '2013/8/18 '+i+':0';
        		}else{
        			hourArray[n] = '2013/8/19 '+(i-24)+':0';
        		}	
        	}
        	
        	for(var i = 0;i < dayArray.length; i++){
        		if(time == dayArray[i]){
        			return new Array(i,value);
        		}
        	}
        	
        	
        	for(var i = 0;i < hourArray.length; i++){
        		if(time == hourArray[i]){
        			return new Array(i,value);
        		}
        	}
        }
        
    </script>
</body>
</html>